<template lang="html">
  <div class="main">
    <div class="main-top">
      <div class="head-left">
        <div class="title">
          <!-- 标题 -->
          <div class="title-city">上海市</div>
          智慧禁毒大数据分析演示系统
        </div>
      </div>
      <div class="head-right">
        <div class="times">
          <!-- 时间 -->
          <div class="times-time">
            {{time}}
          </div>
          <div class="times-date">
            {{date}}
          </div>
        </div>
        <div class="weather">
          <!-- 天气 -->
          <img src="../../assets/pic_weather.png">
        </div>
      </div>
    </div>
    <div class="main-body">
      <div class="menu menu-img" @click="goto('common')">
        <!-- 大菜单 -->
        <img src="../../assets/btn_xfzs.png">
      </div>
      <div class="menu" v-for="(ms, i) in menus" :key="i">
        <!-- 小菜单 -->
        <div class="menu-item menu-img" v-for="(m, j) in ms" :key="i+ '_' + j" @click="goto(m.path)">
          <img :src="m.src">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import {get} from '@/common/js/axios';
export default {
  data () {
    return {
      now: '',
      menus: [
        [
          {
            name: '1',
            src: require('@/assets/btn_rkjg.png'),
            path: 'common0'
          }, {
            name: '2',
            src: require('@/assets/btn_wygl.png'),
            path: 'map'
          }
        ], [
          {
            name: '3',
            src: require('@/assets/btn_yyjh.png'),
            path: 'amap'
          }, {
            name: '4',
            src: require('@/assets/btn_hlw+zw.png'),
            path: 'amap0'
          }
        ]
      ]
    };
  },
  methods: {
    goto (pathName) {
      this.$router.push(`/${pathName}`);
    },
    waether () {
      // let url = 'http://www.msece.com/waether/src/areaDate/101020100.json';
      // console.log(url);
      // get(url, {}).then(res => {
      //   console.log(res);
      // }).catch(err => {
      //   console.log(err);
      // });
    }
  },
  computed: {
    date () {
      if (!this.now) {
        return '';
      }
      return `${this.now.y}/${this.now.M}/${this.now.d} ${this.now.week}`;
    },
    time () {
      if (!this.now) {
        return '';
      }
      return `${this.now.h}:${this.now.m}`;
    }
  },
  created () {
    let fm = n => {
      return n < 10 ? `0${n}` : n;
    };
    let runtime = _ => {
      let now = new Date();
      let week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      this.now = {
        'y': now.getFullYear(),
        'M': fm(now.getMonth() + 1),
        'd': fm(now.getDate()),
        'h': fm(now.getHours()),
        'm': fm(now.getMinutes()),
        's': fm(now.getSeconds()),
        'week': week[now.getDay()]
      };
    };
    runtime();
    setInterval(runtime, 1000);
  },
  mounted () {
    this.waether();
  }
};
</script>

<style lang="css" scoped>
.main {
  background-image: url('../../assets/bg_all_1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  text-align: center;
  .main-top {
    width: 70%;
    height: 15%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    color: #fff;
    .head-left {
      height: 80%;
      flex: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      .title {
        font-size: 30px;
        margin-left: 20px;
        border-left: 6px solid #fff;
        padding-left: 20px;
        .title-city {
          text-align: left;
          font-weight: 700;
          font-size: 35px;
        }
      }
    }
    .head-right {
      flex: 1;
      height: 80%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-end;
      .times {
        font-size: 16px;
        .times-time {
          font-family: impact;
          font-size: 70px;
        }
      }
    }
  }
  .main-body {
    width: 70%;
    /* height: 50%; */
    display: flex;
    flex-direction: row;
    .men-main {

    }
    .menu {
      /* flex: 1; */
      /* margin-left: 20px; */
      display: flex;
      flex-direction: column;
      .menu-item {
        /* margin-top: 10px; */
      }
      .menu-item:first-child {
        /* margin-top: 0px; */
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .menu-img {
        position: relative;
    }
    .menu-img:first-child {
      /* margin-left: 0px; */
    }
    .menu-img:hover:before{
            transition: all 1s;/*过渡,改变闪光的位置*/
            width: 90%;
            height: 80%;
    }
    .menu-img:before{/*在图片之前插入闪光*/
        content: '';
        position: absolute;
        width: 0px;
        height: 80%;
        left: 15px;
        top: 3px;
        overflow: hidden;
        background-image: linear-gradient(to right,rgba(255,255,255,.2) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,.2) 100%);/*linear-gradient渐变效果*/
        /* -webkit-transform: skewX(-25deg);
        -moz-transform: skewX(-25deg) */
    }
  }
}
</style>
